<template>
    <div id="admisson">
        <div class="contain" style="display: flex; height: 10vh; justify-content: center; align-items: center;">{{ "欢迎您，尊敬的辅导员" + usr.name }}</div>
        <div class="contain" v-if="isAdmin">
            <nut-collapse v-model:active="activeName" :accordion="true" icon="down-arrow">
                <nut-collapse-item :title="title1" :name="1">
                    <div style="height: 62vh; overflow: scroll;">
                        <nut-collapse v-model:active="activeName2" :accordion="true">
                            <div v-for="admission in admissionList" :key="admission.id">
                                <div class="item">
                                    <nut-icon name="issue" style="margin: 0.5vh;" :color="colorState(admission)"></nut-icon>
                                    <nut-collapse-item :title="admission.name + ' ' + dateStringfy(admission.begin)" 
                                    :name="admission.id">
                                        <div style="padding-bottom: 2vh;">
                                            <div style="text-align: center;">
                                                <p>健康码状态</p> 
                                                <p :style="'color: ' + codeColorState(admission)">{{ statusToStr(admission.status)  }}</p> 
                                            </div>
                                            <nut-input label-width="40" v-model="state.readonly" readonly label="开始" :placeholder="dateStringfy(admission.begin)" />
                                            <nut-input label-width="40" v-model="state.readonly" readonly label="结束" :placeholder="dateStringfy(admission.end)" />
                                            <nut-input label-width="40" v-model="state.readonly" readonly label="原因" :placeholder="admission.reason" />

                                            <div :style="'text-weight: bold; margin: 2vh; color:' + colorState(admission)">{{ stateToStr(admission.state) }}</div>
                                            <div v-if="admission.state == null">
                                                <nut-button type="default" style="width: 11vh; margin-right: 1vh; margin-top: 1vh;" @click="passApply(admission)">通过</nut-button>
                                                <nut-button type="danger" style="width: 11vh; margin-bottom: 1vh;" @click="refuseApply(admission)">拒绝</nut-button>
                                            </div>
                                        </div>
                                    </nut-collapse-item>
                                </div>
                            </div>
                        </nut-collapse>
                    </div>
                </nut-collapse-item>
            </nut-collapse>
        </div>
        <div v-if="!isAdmin" class="contain" style="height: 20vh; justify-content: center;">您没有辅导员权限！</div>
    </div>
</template>

<script>
import { ref } from "vue";
import common from '../Common.vue'
import axios from "axios";
import { Toast } from '@nutui/nutui';
import { reactive, toRefs, h } from 'vue';
import { Dialog } from '@nutui/nutui';

export default {
    props: {},
    components: {},
    setup() {
        const isAdmin = common.getLoginState().role == 2 ? true : false;
        const activeName = ref(1);
        const activeName2 = ref(0);
        const title = reactive({
            title1: '待批假条'
        })
        // 审核结果颜色
        const colorState = (admission) => {
            if (admission.state == 0) return "#fe4d55";
            else if (admission.state == 1) return "#4cdc71";
            else if (admission.state == 2) return "#fdb927";
            else return "#fffff";
        }
        // 健康码颜色
        const codeColorState = (admission) => {
            if (admission.status == 0) return "#4cdc71";
            else if (admission.status == 1) return "#fdb927";
            else if (admission.status == 2) return "#fe4d55";
            else if (admission.status == 3) return "#b027ff";
            else return "#fffff";
        }
        const state = reactive({
            readonly: ''
        });

        const admissionList = ref([]);
        // 获取用户信息
        const usr = ref({});
        axios
            .post(common.apiUrl + "/api/findById", null, {params: {
                id: common.getLoginState().id
            }})
            .then((res) => {
                usr.value = res.data
            });

        // 查找一下是否已经有该学生的请假申请，且状态为null（待审批）
        axios
            .post(common.apiAdmission + "/api/findAllApply")
                .then((res) => { 
                    admissionList.value = res.data;
                    for (let i = 0; i < admissionList.value.length; i++) {
                        axios
                        .post(common.apiUrl + "/api/findById", null, { params: { id: admissionList.value[i].userid }})
                        .then((res) => {
                            admissionList.value[i].name = res.data.name;
                            admissionList.value[i].status = res.data.status;
                        })
                    }
                    // console.log(res);
                });
        

        return {
            usr,
            state,
            isAdmin,
            activeName,
            activeName2,
            admissionList,
            ...toRefs(title),
            colorState,
            codeColorState
        };
    },
    mounted() {
    },
    methods: {
        statusToStr: function(st) {
            if (st == 0) return "绿码";
            else if (st == 1) return "黄码";
            else if (st == 2) return "红码";
            else return "紫码";
        },
        dateStringfy: function(date) {
            return (new Date(date).getFullYear() + '-' 
                    + (new Date(date).getMonth() + 1 < 10 ? '0' : '') 
                    + (new Date(date).getMonth() + 1) + '-' 
                    + (new Date(date).getDate() < 10 ? '0' : '') 
                    + new Date(date).getDate() + ' ' 
                    + (new Date(date).getHours() < 10 ? '0' : '') 
                    + new Date(date).getHours() + ':' 
                    + (new Date(date).getMinutes() + 1 < 10 ? '0' : '') 
                    + new Date(date).getMinutes())
        },
        stateToStr: function(state) {
            if (state == null) return "未审核";
            else if (state == 0) return "未通过";
            else if (state == 1) return "已通过";
            else if (state == 2) return "已过期";
            else return "错误";
        },
        passApply: function(adm) {
            // 弹出框回调
            const onCancel = () => {
                console.log('event cancel');
            };
            const onOk = () => {
                // 将状态改为1
                axios
                    .post(common.apiAdmission + "/api/restAdmission", null, { params: {
                        id: adm.id,
                        state: 1
                    }})
                    .then((res) => { 
                        // 马上改变假条状态
                        adm.state = 1;
                        Toast.text(res.data.msg)
                        // console.log(res);
                    });
            };
            Dialog({
                    title: '温馨提示',
                    content: '您确定要通过该假条吗？',
                    onCancel,
                    onOk
                });
        },
        refuseApply: function(adm) {
            // 弹出框回调
            const onCancel = () => {
                console.log('event cancel');
            };
            const onOk = () => {
                // 将状态改为0
                axios
                    .post(common.apiAdmission + "/api/restAdmission", null, { params: {
                        id: adm.id,
                        state: 0
                    }})
                    .then((res) => { 
                        // 马上改变假条状态
                        adm.state = 0;
                        Toast.text(res.data.msg)
                        // console.log(res);
                    });
            };
            Dialog({
                    title: '温馨提示',
                    content: '您确定要拒绝该申请吗？',
                    onCancel,
                    onOk
                });
        }
    }
};
</script>

<style>
    body {
        background-color: rgb(165, 126, 255);
    }
    #admisson {
        width: 100%;
        height: 85vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-bottom: 2vh;
    }
    .contain {
        width: 80%;
        padding: 0px 2rem 0px 2rem;
        background-color: #ffffff;
        border-radius: 8px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        box-shadow: 0px 1px 5px rgba(48, 48, 48, 0.5);
        margin-top: 2vh;
    }
    .item {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
</style>